<template>
		<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {getMonthCardFlowUsed} from "@/api/system/info";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '265px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    valueMonth:{
    	type: Date,
    },
    iccid:{
    	type:String
    },
  },
  data() {
    return {
      chart: null,
      lineDataX:[],
      lineDataY:[],
      choosedDate:''
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
      this.setOptions(val)
      }
    },
     valueMonth:{
     handler(newValue, oldValue) {
     	let year = new Date(newValue).getFullYear();
     	let month = new Date(newValue).getMonth()+1;
     	let day = new Date(newValue).getDate();
     	month = month<=9?'0'+month:month;
     	this.choosedDate = year+'-'+month;
     	this.getCurrentMonthFlowUsedFn();
　　　　},
　　　　deep: true
    },
  },
  created() {
  	this.getCurrentMonthFlowUsedFn();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
  		getCurrentMonthFlowUsedFn(){
  		let lineDataX = [];
  		let lineDataY =  [];
  		var filterData ={};
  		let year = new Date(this.valueMonth).getFullYear();
     	let month = new Date(this.valueMonth).getMonth()+1;
     	month = month<=9?'0'+month:month;
  		filterData.iccid = this.iccid;
  		if(!this.choosedDate){
  			filterData.dayDate = year+'-'+month;
  		}else{
  			filterData.dayDate = this.choosedDate;
  		}
  		getMonthCardFlowUsed(filterData).then((res)=>{
  			console.log('月流量')
  			if(res.code=='200'){
  				lineDataX = this.initDataXFn(year,month);
  				for(var j=0;j<lineDataX.length;j++){
  				//	var resCreateTime = (res.data[res.data.length-1].createTime.substring(0,10)).replace(/-/g,'')
  					var resCreateTime =  this.getNowTime();
  					if(lineDataX[j]<=resCreateTime){
  						lineDataY.push(0);
  					}
					}
				for(var i=0;i<res.data.length;i++){
					var createTime = res.data[i].createTime.substring(0,10);
					createTime = createTime.replace(/-/g,'');
					for(var j=0;j<lineDataX.length;j++){
						if(createTime==lineDataX[j]){
							lineDataY[j]=(res.data[i].flowUsed).toFixed(2);
						}
					}
				}
  			}
  		this.initChart(lineDataX,lineDataY);
  		})
  	},
  	initDataXFn(year,month){
  		var d = new Date(year, month, 0);
  		var dayLength = d.getDate();
  		var lineDataX = [];
  		for(var i=1;i<=dayLength;i++){
			i=i<=9?'0'+i:i
			lineDataX.push(year+month+i)
  		}
  		return lineDataX
  	},
  	getNowTime(){
  		var nowData = new Date();
  		var year = nowData.getFullYear();
  		var month = nowData.getMonth()+1;
  		month = this.addZero(month);
  		var day = nowData.getDate();
  		day = this.addZero(day);
  		return year+month+day;
  	},
  	addZero(a){
  		return  a=a<=9?'0'+a:a
  	},
    initChart(lineDataX,lineDataY) {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(lineDataX,lineDataY);
    },
    setOptions(lineDataX,lineDataY) {
      this.chart.setOption({
        xAxis: {
          data: lineDataX,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10],
          formatter: "{b} <br/>{a0} : {c0} MB"
        },
         toolbox: {
            show: true,
            feature: {
                magicType: {
                    type: ['line', 'bar']
                },  //切换为折线图，切换为柱状图
                saveAsImage: {}   //保存为图片
            }
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['GPRS流量']
        },
        series: [{
          name: 'GPRS流量', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: lineDataY,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
       ]
      })
    }
  }
}
</script>


<style scoped="scoped" lang="scss">
	.className{
		width: 100%;
	}
	.chart div{
		width: 100%!important;
	}
</style>
